<template>
    <main class="content">

        <!-- 排班信息 -->
        <div class="scheduleHead">
            <span style="margin-right: 20px;">排班信息</span>
            <el-select v-model="selectedWeek" style="width:100px" @change="handleWeekChange">
                <el-option
                    v-for="option in weekOptions"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value">
                </el-option>
            </el-select>
            <el-select v-model="selectedRoom" style="width:100px; margin-left: 20px;" @change="handleRoomChange">
                <el-option
                    v-for="option in roomOptions"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value">
                </el-option>
            </el-select>
            <el-button class="genDelButton" style="float: right; padding: 3px 0" size="small" @click="exportSchedule">
                导出该周排班
            </el-button>
            <el-button class="genDelButton" style="float: right; padding: 3px 0" size="small" @click="genSchedule">
                生成该周排班
            </el-button>
            <el-button class="genDelButton" style="float: right; padding: 3px 0" size="small" @click="delSchedule">
                删除该周排班
            </el-button>
        </div>
        <el-card class="box-card" style="margin-top: 20px;">
            <el-table :data="scheduleData" stripe style="width: 100%" :row-style="{height:'65px'}" id="schedulePdf">
                <el-table-column prop="time" label="时间段" width="175"></el-table-column>
                <el-table-column
                    v-for="day in days"
                    :key="day.value"
                    :prop="day.prop"
                    :label="day.label"
                    width="175">
<!--                    <template #default="scope">-->
<!--                        <span @click="openDropdown(scope.$index, day.prop)">{{ scope.row[day.prop] }}</span>-->
<!--                        <el-select-->
<!--                            v-if="dropdownVisible && dropdownPosition.rowIndex === scope.$index && dropdownPosition.col === day.prop"-->
<!--                            v-model="selectedDoctorByTable"-->
<!--                            @change="updateDoctor(scope.$index, day.prop)"-->
<!--                            placeholder="选择医生"-->
<!--                            style="width: 100px;">-->
<!--                            <el-option-->
<!--                                v-for="option in doctorOptions"-->
<!--                                :key="option.value"-->
<!--                                :label="option.label"-->
<!--                                :value="option.value">-->
<!--                            </el-option>-->
<!--                        </el-select>-->
<!--                    </template>-->
                </el-table-column>
            </el-table>
        </el-card>
        <div class="modifyHead">
            <span style="margin-right: 20px">修改排班</span>
        </div>
        <div class="modifyArea">
            <el-date-picker
                v-model="selectedDate"
                type="date"
                placeholder="选择日期"
                style="margin-left: 20px"
                @change="handleDateChange">
            </el-date-picker>
            <el-select v-model="selectedTime" placeholder="选择时间段" style="margin-left: 20px; width: 150px" @change="handleTimeChange">
                <el-option
                    v-for="option in timeOptions"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value">
                </el-option>
            </el-select>
            <el-select v-model="selectedRoom2" placeholder="选择科室" style="margin-left: 20px; width: 100px" @change="handleDepartmentChange">
                <el-option
                    v-for="option in roomOptions"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value">
                </el-option>
            </el-select>
            <div class="showNowDoctor">
                <span>当前医生：{{nowDoctor}}</span>
            </div>
            <div class="selectDoctorClass">
                <span style="margin-left: 20px; color: darkgray">重新指定：</span>
                <el-select v-model="selectedDoctor" placeholder="选择医生" style=" width: 150px" @change="HandleDoctorChange">
                    <el-option
                        v-for="option in doctorOptions"
                        :key="option.value"
                        :label="option.label"
                        :value="option.value">
                    </el-option>
                </el-select>
                <el-button class="ensureButton" style="padding: 3px 0" size="small" @click="modifyEnsure">
                    确认修改
                </el-button>
                <el-button class="ensureButton" style="padding: 3px 0" size="small" @click="getDoctorList">
                    刷新医生
                </el-button>
            </div>
        </div>
    </main>
</template>

<script>
import { ref, onMounted, computed, watch } from 'vue';
import { ElMessage } from 'element-plus';
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
import * as echarts from 'echarts';
import router from "@/router";
import axios from 'axios';

export default {
    name: 'SchedulePage',
    setup() {

        const selectedWeek = ref(0);

        const selectedRoom = ref("骨科");

        const selectedDate = ref(null);

        const selectedTime = ref(null);

        const selectedRoom2 = ref(null);

        const nowDoctor = ref('（请选择日期）');

        const dropdownVisible = ref(false);

        const dropdownPosition = ref({ rowIndex: null, col: null });

        const selectedDoctorByTable = ref(null);

        const selectedDoctor = ref(null);

        const weekOptions = ref([
            { label: '本周', value: 0},
            { label: '下1周', value: 1},
            { label: '下2周', value: 2},
            { label: '下3周', value: 3},
            { label: '下4周', value: 4},
            { label: '上1周', value: -1},
            { label: '上2周', value: -2},
            { label: '上3周', value: -3},
            { label: '上4周', value: -4}
        ])

        // you can add here
        const roomOptions = ref([
            { label: '内科', value: "01" },
            { label: '外科', value: "02" },
            { label: '儿科', value: "03" },
            { label: '妇产科', value: "04" },
            { label: '眼科', value: "05" },
            { label: '耳鼻喉科', value: "06" },
            { label: '皮肤科', value: "07" },
            { label: '精神科', value: "08" },
            { label: '骨科', value: "09" },
            { label: '急诊科', value: "10" },
        ]);

        // const scheduleData = ref([
        //     { time: '8:00 – 10:00', mon: null, tue: '02', wed: '02', thu: '04', fri: '01', sat: '01', sun: '04' },
        //     { time: '10:00 – 12:00', mon: '02', tue: '04', wed: '03', thu: '01', fri: '01', sat: '04', sun: '03' },
        //     { time: '13:00 – 15:00', mon: '02', tue: '04', wed: '03', thu: '01', fri: '01', sat: '04', sun: '03' },
        //     { time: '15:00 – 17:00', mon: '02', tue: '04', wed: '03', thu: '01', fri: '01', sat: '04', sun: '03' },
        //     { time: '18:00 – 20:00', mon: '02', tue: '04', wed: '03', thu: '01', fri: '01', sat: '04', sun: '03' }
        // ]);

        const timeOptions = ref([
            { label: '8:00 – 10:00', value: '8:00 – 10:00' },
            { label: '10:00 – 12:00', value: '10:00 – 12:00' },
            { label: '13:00 – 15:00', value: '13:00 – 15:00' },
            { label: '15:00 – 17:00', value: '15:00 – 17:00' },
            { label: '18:00 – 20:00', value: '18:00 – 20:00' }
        ]);

        const transformToDoctorList = (data) => {
            console.log(data);
            return data.map(item => ({
                label: item.userId.toString() + " " + item.name,
                value: item.userId.toString(),
            }));
        };

        const getDoctorList = () => {
            console.log("获取医生列表");
            axios.get('http://localhost:8085/api/doctor/getAll')
                .then(response => {
                    if (response.status === 200) {
                        doctorOptions.value = transformToDoctorList(response.data.data);
                    } else {
                        // 显示错误消息
                        ElMessage({
                            type: 'error',
                            message: '获取医生列表失败，请重试',
                        });
                    }
                })
                .catch((error) => {
                    console.error('请求错误:', error);
                    ElMessage({
                        type: 'error',
                        message: '获取医生列表失败，请重试',
                    });
                });
        }

        const doctorOptions = ref([])
        getDoctorList();

        const days = ref([
            { label: '周一', prop: 'mon' },
            { label: '周二', prop: 'tue' },
            { label: '周三', prop: 'wed' },
            { label: '周四', prop: 'thu' },
            { label: '周五', prop: 'fri' },
            { label: '周六', prop: 'sat' },
            { label: '周日', prop: 'sun' }
        ]);

        const scheduleData = ref(null);

        const getMondayAndSunday = (weekOffset) => {
            const today = new Date();
            const dayOfWeek = today.getDay() || 7;
            const monday = new Date(today);
            const sunday = new Date(today);

            monday.setDate(today.getDate() - dayOfWeek + 1 + (weekOffset * 7));
            sunday.setDate(today.getDate() + (7 - dayOfWeek) + (weekOffset * 7));

            return {
                monday: monday.toISOString().split('T')[0], // 转换为 YYYY-MM-DD 格式
                sunday: sunday.toISOString().split('T')[0],
            };
        };

        const initializeScheduleData = () => {
            const timeOptions = [
                '8:00 – 10:00',
                '10:00 – 12:00',
                '13:00 – 15:00',
                '15:00 – 17:00',
                '18:00 – 20:00'
            ];
            return timeOptions.map(time => ({
                time,
                mon: null,
                tue: null,
                wed: null,
                thu: null,
                fri: null,
                sat: null,
                sun: null
            }));
        };

        const daysMap = {
            1: 'mon',
            2: 'tue',
            3: 'wed',
            4: 'thu',
            5: 'fri',
            6: 'sat',
            0: 'sun'
        };

        const mapScheduleData = (schedules) => {
            const data = initializeScheduleData();
            schedules.forEach(schedule => {
                const dayOfWeek = new Date(schedule.date).getDay();
                const dayProp = daysMap[dayOfWeek];
                const timeSlot = data.find(slot => slot.time === schedule.time);
                if (timeSlot) {
                    timeSlot[dayProp] = schedule.doctorId;
                }
            });
            return data;
        };

        const exportSchedule = () => {
            console.log('导出排班');
            exportToPDF(document.querySelector('#schedulePdf'), '排班.pdf');
        }

        const getSchedule = () => {
            console.log("获取该周排班");
            const start_end = getMondayAndSunday(selectedWeek.value);
            axios.post('http://localhost:8085/schedule', { start: start_end.monday, end: start_end.sunday, roomId: selectedRoom.value })
                .then(response => {
                    if (response.status === 200) {
                        // 将返回的数据赋值给 scheduleData
                        scheduleData.value = mapScheduleData(response.data);
                    } else {
                        // 显示错误消息
                        ElMessage({
                            type: 'error',
                            message: '获取排班失败，请重试',
                        });
                    }
                })
                .catch((error) => {
                    // 捕获错误并显示错误消息
                    console.error('请求错误:', error);
                    ElMessage({
                        type: 'error',
                        message: '获取排班失败，请重试',
                    });
                });
        }

        getSchedule();

        const convertToScheduleList = (scheduleData, startDate) => {
            const daysMap = {
                mon: 1,
                tue: 2,
                wed: 3,
                thu: 4,
                fri: 5,
                sat: 6,
                sun: 0
            };

            const schedules = [];

            scheduleData.forEach(slot => {
                Object.keys(daysMap).forEach(day => {
                    if (slot[day]) {
                        const dayOfWeek = daysMap[day];
                        const date = new Date(startDate);
                        date.setDate(date.getDate() + dayOfWeek - (date.getDay() || 7) + 1);

                        const schedule = {
                            date: date.toISOString().split('T')[0],
                            time: slot.time,
                            doctorId: slot[day],
                            roomId: selectedRoom.value // 这里需要根据你的逻辑设置roomId
                        };

                        schedules.push(schedule);
                    }
                });
            });

            return schedules;
        };

        const genSchedule = () => {
            const start_end = getMondayAndSunday(selectedWeek.value); // 本周的周一日期
            axios.post('http://localhost:8085/schedule/delete', { start: start_end.monday, end: start_end.sunday, roomId: selectedRoom.value })
                .then(response => {
                    if (response.status === 200) {
                    } else {
                        ElMessage({
                            type: 'error',
                            message: '自动创建失败，请重试',
                        });
                    }
                })
                .catch((error) => {
                    console.error('请求错误:', error);
                    ElMessage({
                        type: 'error',
                        message: '自动创建失败，请重试',
                    });
                });

            console.log("生成该周排班");
            // scheduleData.value = generateRandomSchedule();

            console.log("获取医生列表");
            axios.get('http://localhost:8085/api/doctor/getAll')
                .then(response => {
                    if (response.status === 200) {
                        doctorOptions.value = transformToDoctorList(response.data.data);
                        console.log("aaa");
                        const doctors = doctorOptions.value.map(item =>
                            item.value
                        )
                        console.log("doctors");
                        console.log(doctors);

                        const times = [
                            '8:00 – 10:00',
                            '10:00 – 12:00',
                            '13:00 – 15:00',
                            '15:00 – 17:00',
                            '18:00 – 20:00'
                        ];
                        const days = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];

                        scheduleData.value = times.map(time => {
                            const daySchedule = { time };
                            days.forEach(day => {
                                const randomDoctor = doctors[Math.floor(Math.random() * doctors.length)];
                                daySchedule[day] = randomDoctor;
                            });
                            return daySchedule;
                        });

                        const scheduleList = convertToScheduleList(scheduleData.value, start_end.monday);
                        console.log(scheduleList);
                        axios.post('http://localhost:8085/schedule/addBatch', scheduleList)
                            .then(response => {
                                if (response.status === 200) {
                                    // 显示成功消息
                                    ElMessage({
                                        type: 'success',
                                        message: '自动创建成功',
                                    });
                                } else {
                                    // 显示错误消息
                                    ElMessage({
                                        type: 'error',
                                        message: '自动创建失败，请重试',
                                    });
                                }
                            })
                            .catch((error) => {
                                // 捕获错误并显示错误消息
                                console.error('请求错误:', error);
                                ElMessage({
                                    type: 'error',
                                    message: '自动创建失败，请重试',
                                });
                            });


                    } else {
                        // 显示错误消息
                        ElMessage({
                            type: 'error',
                            message: '获取医生列表失败，请重试',
                        });
                    }
                })
                .catch((error) => {
                    console.error('请求错误:', error);
                    ElMessage({
                        type: 'error',
                        message: '获取医生列表失败，请重试',
                    });
                });
        };

        const delSchedule = () => {
            console.log("删除该周排班");
            const start_end = getMondayAndSunday(selectedWeek.value).monday; // 本周的周一日期
            axios.post('http://localhost:8085/schedule/delete', { start: start_end.monday, end: start_end.sunday, roomId: selectedRoom.value })
                .then(response => {
                    if (response.status === 200) {
                        // 显示成功消息
                        ElMessage({
                            type: 'success',
                            message: '删除成功',
                        });
                        getSchedule();
                    } else {
                        // 显示错误消息
                        ElMessage({
                            type: 'error',
                            message: '删除失败，请重试',
                        });
                    }
                })
                .catch((error) => {
                    // 捕获错误并显示错误消息
                    console.error('请求错误:', error);
                    ElMessage({
                        type: 'error',
                        message: '删除失败，请重试',
                    });
                });
        };

        const openDropdown = (rowIndex, col) => {
            console.log(rowIndex);
            console.log(col);
            dropdownPosition.value = { rowIndex, col };
            dropdownVisible.value = true;
            // selectedDoctorByTable.value = scheduleData.value[rowIndex][col];
        };

        const updateDoctor = (rowIndex, col) => {
            scheduleData.value[rowIndex][col] = selectedDoctorByTable.value;

            dropdownVisible.value = false;
            ElMessage.success('修改成功');
        };

        const handleWeekChange = (newWeek) => {
            selectedWeek.value = newWeek;
            console.log('Selected Week:', newWeek);
            getSchedule();
        }

        const handleRoomChange = (newRoom) => {
            selectedRoom.value = newRoom;
            console.log('Selected Room:', newRoom);
            getSchedule();
        };


        const handleDateChange = (newDate) => {
            const d = new Date(newDate);
            const year = d.getFullYear();
            const month = String(d.getMonth() + 1).padStart(2, '0');
            const day = String(d.getDate()).padStart(2, '0');
            selectedDate.value = `${year}-${month}-${day}`;
            console.log('Formatted Date:', selectedDate.value);
        }

        // const handleTimeChange = (newTime) => {
        //     selectedTime.value = newTime;
        //     console.log('Selected time:', newTime);
        // }
        //
        // const handleRoomChange2 = (newRoom) => {
        //     selectedRoom2.value = newRoom;
        //     console.log('Selected Room:', newRoom);
        // }

        const HandleDoctorChange = (newDoctor) => {
            selectedDoctor.value = newDoctor;
            console.log('Selected doctor:', newDoctor);
        }

        const modifyEnsure = () => {
            console.log('确认修改');
            if (!selectedDate.value) {
                ElMessage({
                    message: '请选择日期!',
                    type: 'warning'
                });
            } else if (!selectedTime.value) {
                ElMessage({
                    message: '请选择时间段!',
                    type: 'warning'
                });
            } else if (!selectedRoom2.value) {
                ElMessage({
                    message: '请选择科室!',
                    type: 'warning'
                });
            } else if (!selectedDoctor.value) {
                ElMessage({
                    message: '请选择医生!',
                    type: 'warning'
                });
            } else if (nowDoctor.value == null && selectedDoctor.value === 'none') {
                ElMessage({
                    message: '该排班原本就不存在',
                    type: 'warning'
                });
            } else if (nowDoctor.value == null) {
                axios.post('http://localhost:8085/schedule/add', {
                    date: selectedDate.value, time: selectedTime.value, roomId: selectedRoom2.value, doctorId: selectedDoctor.value})
                    .then(response => {
                        if (response.status === 200) {
                            ElMessage({
                                type: 'success',
                                message: '修改成功',
                            });
                            getSchedule();
                            nowDoctor.value = selectedDoctor.value;
                        } else {
                            ElMessage({
                                type: 'error',
                                message: '修改失败，请重试',
                            });
                        }
                    })
                    .catch((error) => {
                        console.error('请求错误:', error);
                        ElMessage({
                            type: 'error',
                            message: '修改失败，请重试',
                        });
                    });
            } else if (selectedDoctor.value === 'none') {
                axios.post('http://localhost:8085/schedule/delete', {
                    start: selectedDate.value, end: selectedDate.value, time: selectedTime.value, roomId: selectedRoom2.value})
                    .then(response => {
                        if (response.status === 200) {
                            ElMessage({
                                type: 'success',
                                message: '修改成功',
                            });
                            nowDoctor.value = null;
                            getSchedule();
                        } else {
                            ElMessage({
                                type: 'error',
                                message: '修改失败，请重试',
                            });
                        }
                    })
                    .catch((error) => {
                        console.error('请求错误:', error);
                        ElMessage({
                            type: 'error',
                            message: '修改失败，请重试',
                        });
                    });
            } else {
                axios.post('http://localhost:8085/schedule/delete', {
                    start: selectedDate.value, end: selectedDate.value, time: selectedTime.value, roomId: selectedRoom2.value})
                    .then(response => {
                        if (response.status !== 200) {
                            ElMessage({
                                type: 'error',
                                message: '修改失败，请重试',
                            });
                            return;
                        }
                    })
                    .catch((error) => {
                        console.error('请求错误:', error);
                        ElMessage({
                            type: 'error',
                            message: '修改失败，请重试',
                        });
                    })
                axios.post('http://localhost:8085/schedule/add', {
                    date: selectedDate.value, time: selectedTime.value, roomId: selectedRoom2.value, doctorId: selectedDoctor.value})
                    .then(response => {
                        if (response.status === 200) {
                            ElMessage({
                                type: 'success',
                                message: '修改成功',
                            });
                            nowDoctor.value = selectedDoctor.value;
                            getSchedule();
                        } else {
                            ElMessage({
                                type: 'error',
                                message: '修改失败，请重试',
                            });
                        }
                    })
                    .catch((error) => {
                        console.error('请求错误:', error);
                        ElMessage({
                            type: 'error',
                            message: '修改失败，请重试',
                        });
                    });

            }
        }

        const exportToPDF = (element, filename) => {

            const margin = 10;

            html2canvas(element, { scrollY: -window.scrollY }).then(canvas => {
                const imgData = canvas.toDataURL('image/png');
                const pdf = new jsPDF('landscape', 'pt', 'a4');
                const pdfWidth = pdf.internal.pageSize.getWidth() - margin * 2;
                const pdfHeight = pdf.internal.pageSize.getHeight() - margin * 2;
                const imgProps = pdf.getImageProperties(imgData);
                const imgWidth = pdfWidth;
                const imgHeight = (imgProps.height * imgWidth) / imgProps.width;
                let adjustedImgHeight = imgHeight;
                let adjustedImgWidth = imgWidth;
                if (imgHeight > pdfHeight) {
                    adjustedImgHeight = pdfHeight;
                    adjustedImgWidth = (imgProps.width * adjustedImgHeight) / imgProps.height;
                }

                let heightLeft = adjustedImgHeight;
                let position = margin; // 从边缘开始

                // 添加第一页
                pdf.addImage(imgData, 'PNG', margin + (pdfWidth - adjustedImgWidth) / 2, position, adjustedImgWidth, adjustedImgHeight);
                heightLeft -= pdfHeight;

                // 如有需要，添加更多页面
                while (heightLeft > 0) {
                    position = heightLeft - adjustedImgHeight + margin; // 从边缘开始
                    pdf.addPage();
                    pdf.addImage(imgData, 'PNG', margin + (pdfWidth - adjustedImgWidth) / 2, position, adjustedImgWidth, adjustedImgHeight);
                    heightLeft -= pdfHeight;
                }

                pdf.save(filename);
            });
        };

        const getOneSchedule = (date, time, room) => {
            console.log("获取单个排班:", date, time, room);
            return axios.post('http://localhost:8085/schedule', { start: date, end: date, roomId: room, time: time})
                .then(response => {
                    if (response.status === 200) {
                        // 将返回的数据赋值给 scheduleData
                        return response.data;
                    } else {
                        // 显示错误消息
                        ElMessage({
                            type: 'error',
                            message: '获取排班失败，请重试',
                        });
                        return null;
                    }
                })
                .catch((error) => {
                    // 捕获错误并显示错误消息
                    console.error('请求错误:', error);
                    ElMessage({
                        type: 'error',
                        message: '获取排班失败，请重试',
                    });
                    return null;
                });
        }

        onMounted(() => {
        });

        watch([selectedDate, selectedTime, selectedRoom2], ([newDate, newTime, newRoom]) => {
            console.log("selectedDate:", newDate);
            if (newDate && newTime && newRoom) {
                // 在此处根据新的日期和时间更新 nowDoctor 的值
                getOneSchedule(newDate, newTime, newRoom)
                    .then(data => {
                        console.log(data);
                        console.log(data.length);
                        if (data === null) return;
                        if (data.length > 1) {
                            ElMessage({
                                type: 'warning',
                                message: '获取信息异常',
                            });
                        } else if (data.length === 0) {
                            nowDoctor.value = null;
                        } else {
                            for (let i = 0; i < doctorOptions.value.length; i++) {
                                if (doctorOptions.value[i].value === data[0].doctorId) {
                                    nowDoctor.value = doctorOptions.value[i].label;
                                    break;
                                }
                            }
                        }
                    })
                console.log('Updated nowDoctor:', nowDoctor.value);
            } else {
                if (!newDate)
                    nowDoctor.value = '（请选择日期）';
                else if (!newTime)
                    nowDoctor.value = '（请选择时间段）';
                else
                    nowDoctor.value = '（请选择科室）';
            }
        });

        return {
            selectedWeek,
            selectedRoom,
            selectedDate,
            selectedTime,
            selectedRoom2,
            nowDoctor,
            dropdownVisible,
            dropdownPosition,
            selectedDoctorByTable,
            selectedDoctor,
            weekOptions,
            roomOptions,
            timeOptions,
            doctorOptions,
            scheduleData,
            days,
            exportSchedule,
            genSchedule,
            delSchedule,
            openDropdown,
            updateDoctor,
            handleWeekChange,
            handleRoomChange,
            handleDateChange,
            getDoctorList,
            // handleTimeChange,
            // handleRoomChange2,
            HandleDoctorChange,
            modifyEnsure,
            exportToPDF
        }
    }
};
</script>

<style scoped>
/* Add your component styles here */

.genDelButton {
    width: 90px;
    height: 30px;
    margin-right: 20px;
    margin-left: 10px;
    background-color: darkgray;
    color: white;
}

.genDelButton:hover {
    width: 100px;
    height: 33px;
}

.content {
    flex: 1; /* 让内容部分占据剩余空间 */
    padding: 1%;
}

.box-card {
    margin: 20px;
    height: 400px;    /* 设置卡片的固定高度 */
    overflow: hidden; /* 隐藏溢出的内容 */
}

.scheduleHead {
    text-align: left;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;       /* 与下方表格的距离 */
}

.modifyHead {
    text-align: left;
    font-size: 20px;
    font-weight: bold;
    margin-top: 40px;
    margin-bottom: 20px;
}

.modifyArea {
    text-align: left;
}

.showNowDoctor {
    margin-top: 20px;
    margin-left: 20px;
    color: darkgray;
}

.selectDoctorClass {
    margin-top: 20px;
}

.ensureButton {
    width: 90px;
    height: 30px;
    margin-left: 20px;
    background-color: darkgray;
    color: white;
}

.ensureButton:hover {
    width: 100px;
    height: 33px;
}

.chooseButton {
    background-color: lightgray;
    color: rgb(128, 128, 128);
    width: 110px;
}

.chooseButton:hover {
    background-color: darkgray; /* 鼠标悬浮时的背景色 */
    color: white;
}

</style>
